<template>
    <div>
        <el-table :data="subscribe" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="topic.title" label="课题" />
            <el-table-column prop="name" label="组名" />
            <el-table-column prop="leader_name" label="组长" />
            <el-table-column label="小组成员">
                <template slot-scope="scope">
                    <span v-for="(item, index) in scope.row.team" :key="index" class="user">{{ item.nickname }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="introduce" label="小组介绍" />
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-link type="primary" @click="examine(scope.row.id, 1)" class="link">通过</el-link>
                    <el-link type="danger" @click="examine(scope.row.id, 2)">拒绝</el-link>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background layout="prev, pager, next" :total="subscribeTotal" :page-size="pagesize" @current-change="cheangePage" />
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    name: 'WebStudentOrder',
    data() {
        return {
            page: 0,
            pagesize: 14,
            teacher_id: this.$cookies.get('userInfo').id
        };
    },
    computed: {
        ...mapState('Teacher', ['subscribe', 'subscribeTotal']),
    },
    methods: {
        ...mapActions('Teacher', ['getSubscribe', 'toExamine']),
        examine(team_id, state) {
            this.toExamine({ team_id, state, teacher_id: this.teacher_id }).then(res => {
                this.getData();
            })
        },
        getData() {
            let { page, pagesize, teacher_id } = this;
            this.getSubscribe({ page, pagesize, teacher_id });
        },
        cheangePage(e) {
            this.page = --e;
            this.getData();
        },
    },
    mounted() {
        this.getData();
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";

.user {
    .mar_r(5px);
}

.link {
    .mar_r(10px);
}

.page {
    .pos_f();
    .pos_rb(20px, 20px);
}</style>